/*
 * @Author: funlee
 * @Email: i@funlee.cn
 * @Date: 2019-06-27 17:32:36
 * @Description: 首页-应用工具-APP评论新消息检索-详情-使用人群
 */
import React from "react";
import "./style.scss";

class APPIRUseCrowd extends React.Component {
    state = {
        menus: [
            { name: "使用关联图谱", id: "use" },
            { name: "区域分布图谱", id: "area" },
            { name: "人群统计分析", id: "people" }
        ],
        menusActive: "use" // 默认展示 使用关联图谱
    };
    render() {
        const { menus, menusActive } = this.state;
        const initData = [
            { value: 34, name: "张三" },
            { value: 34, name: "张三" },
            { value: 34, name: "张三" },
            { value: 34, name: "张三" },
            { value: 34, name: "张三" },
            { value: 34, name: "张三" },
            { value: 34, name: "张三" },
            { value: 34, name: "张三" },
            { value: 34, name: "张三" },
            { value: 34, name: "张三" }
        ];
        return (
            <div className="APPIR-use-crowd">
                <div className="c-left">
                    <ul className="menus">
                        {menus.map(menu => (
                            <li
                                key={`menu-${menu.id}`}
                                className={menu.id === menusActive ? "active" : null}
                                onClick={() => this.setState({ menusActive: menu.id })}
                            >
                                {menu.name}
                            </li>
                        ))}
                    </ul>
                </div>
                <div className="c-right">
                    <div className="c-right-top">
                        <span className="tip">人群列表</span>
                        <span className="add-btn">+ 添加使用人</span>
                    </div>
                    <ul className="common-side-right-lists">
                        <li className="list-title">
                            <span>名称</span>
                            <span>使用 APP 数</span>
                            <span>操作</span>
                        </li>
                        {initData.map((d, index) => (
                            <li className="list-item" key={`l-${index}`}>
                                <span>{d.name}</span>
                                <span>{d.value}</span>
                                <span>
                                    <span className="op-btn detail-btn">详情</span>
                                </span>
                            </li>
                        ))}
                    </ul>
                </div>
            </div>
        );
    }
}

export default APPIRUseCrowd;
